<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3"> 
<head>
    <!--Bootstrap-->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <!--bootstrap Select-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>
    <!--select2-->
    <link href="https://cdn.bootcss.com/select2/4.0.3/css/select2.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/select2/4.0.3/js/select2.js"></script>
    <!--edit-->
    <link rel="stylesheet" href="/css/editormd.css" />
    <script src="/js/editormd.js"></script>
    <!--文本编辑-->
    <link href="/css/bootstrap-editable.css" rel="stylesheet" />
    <script src="/js/bootstrap-editable.min.js"></script>
    <!--滚动条-->
    <script src="https://cdn.bootcss.com/jQuery-slimScroll/1.3.8/jquery.slimscroll.min.js"></script>
    <!--Tree-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
    <!--Jquery Table-->
    <link href="https://cdn.bootcss.com/datatables/1.10.15/css/dataTables.jqueryui.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/datatables/1.10.15/js/jquery.dataTables.min.js"></script>
    <!--Bootstrap Table-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.css"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>
    <script src="http://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/locale/bootstrap-table-zh-CN.min.js"></script>
    <!--bootstrap datepicker-->
    <link rel="stylesheet" href="/css/bootstrap-datepicker.min.css" />
    <script src="/js/bootstrap-datepicker.min.js"></script>
    <script src="/js/bootstrap-datepicker.zh-CN.min.js"></script>
    <!--bootstrap page-->
    <script src="/js/bootstrap-paginator.min.js"></script>
    <!----layer ui-->
    <link rel="stylesheet" href="/js/layui/css/layui.css" />
    <script src="/js/layui/layui.all.js"></script>
    <script src="/js/layui/layui.js"></script>
	<script src="https://cdn.bootcss.com/knockout/3.4.2/knockout-min.js"></script>
	<script src="https://cdn.bootcss.com/knockout.mapping/2.4.1/knockout.mapping.js"></script>
    <title>Hello World!</title>
</head>
<body>



<hr/>
<h3 style="text-align: center;">Jquery  Table组件！</h3>




<div class="row">

<div class="col-sm-10" style="border: 1px solid red; height: auto;">

<button class="btn" type="button" data-bind="click:myClick">刷新</button><br/>

***绑定单属性**【<span data-bind="text:name"></span>--<span data-bind="text:age"></span>】<br/>
***绑定OBJ**【<span data-bind="text:dto().password"></span>--<span data-bind="text:dto().student"></span>】

	<table id="example" class="display" cellspacing="0" width="100%">
	    <thead>
	    <tr>
	    	<th>序号</th>
	        <th>名称</th>
	        <th>版本号码</th>
	        <th>内容</th>
	        <th>集合</th>
	        <th>开始时间</th>
	        <th>修改时间</th>
	        <th>操作</th>
	    </tr>
	    
	    <tbody data-bind="foreach : arrs">
	    <tr>
	    <th data-bind="text:id"></th>
	    <th data-bind="text:username"></th>
	    <th data-bind="text:password"></th>
	    </tr>
	    </tbody>
	    
	</table>
</div>

</div>





<script type="text/javascript">
function  myViewModel() {
		var self = this;
		self.arrs = ko.observableArray([]);//监控数组
		self.name = ko.observable("默认Name");//监控单个属性
		self.age = ko.observable("默认AGe");//监控单个属性
		self.dto = ko.observable({password:'p',student:'h'});//监控对象
	  	self.myClick = function (){
	  	  	self.init();//初始化表格
	  		self.name(new Date().getTime());//单个重新赋值
	  	  	self.age(Math.random());//单个重新赋值
	  	  	self.dto({password:'password对象属性改变后'+Math.random(),student:'student对象属性改变够'+Math.random()});//对象重新赋值
	  	}
	    self.init = function (){
            $.getJSON("/user/tableAjax/",function (data){
            	self.arrs(data.data);
            })
            
        }
        self.init();//初始化是加载表格数据
        setInterval(self.myClick,500)//循环刷新数据自动渲染！
        
       self.arrs.subscribe(function (newValue){//knockout  监控值变化
    	   console.log("arrs值改变了"+self.arrs());
       })
}
ko.applyBindings(new myViewModel(),$(".row")[0]);





</script>





</body>
</html>